<template>
  <div class="route_type">
    <span v-for="item in state.typeList" :key="item.companyRole" :value="item.companyRole"
      :class="{ 'choiced': item.companyRole == state.companyRole }" @click="handleRouteType(item)">{{ item.meta.title }}
      <span v-show="item.companyRole == state.companyRole" style="height:2px;width:30px;margin-top:5px;background-color: #2158F3;"></span>
    </span>
    <div v-if="bottomLine" style="height:1px;width:100%;margin-top:27px;background-color: #EEEEEE;"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, watch,ref } from 'vue'
const emit = defineEmits(['handleTypeChange'])
import usePermissionStore from '@/store/modules/permission'
// import { constantRoutesTest } from '@/router'
const router = useRouter();

const props = defineProps({
  bottomLine: {
    type: Boolean,
    default: false
  },
  choidId: {
    type: Number,
    default: 0
  },
  commandChang:{
     type: Number,
    default: 1
  },
  companyRole: {
    type: String,
    default: ''
  }
  // typeList: {
  //   type: Array,
  //   default: [{ id: 5, name: '租赁', tagName: 'rent' },
  //  { id: 10, name: '客服', tagName: 'server' }, 
  // { id: 15, name: '财务', tagName: 'financial' }]
  // }
})

const state = reactive({
  companyRole: 'zx-rent',
  typeList: []
})
// const routList = ref(JSON.parse(JSON.stringify(constantRoutesTest))) //12级菜单
const permissionStore = usePermissionStore()
const routList=ref(permissionStore.routesAll)

watch(() => props.companyRole, (newVal, oldVal) => {

  if(props.commandChang==2){
    state.typeList = showTages(newVal)
    props.commandChang=1
    localStorage.setItem('workbenchPosition', state.typeList[0]?.companyRole)
    state.companyRole = localStorage.getItem('tagName') || 'zx-rent'
    // changeSidbar(state.companyRole)
    changeSidbar(state.typeList[0]?.companyRole)
  }
})
onMounted(() => {
  state.typeList = showTages(localStorage.getItem('companyRole'))
  state.companyRole = localStorage.getItem('tagName') || 'zx-rent'
  changeSidbar(state.companyRole)
  localStorage.setItem('workbenchPosition', state.typeList[0]?.companyRole)
  state.companyRole =  localStorage.getItem('tagName') || 'zx-rent'
})

function handleRouteType(val) {
  state.companyRole = val.companyRole
  changeSidbar(val.companyRole)

  // if (val.jumpType == '1') {
  //   router.push({ path: '/index', query: { comRole: val.tips } })
  // } else if (val.jumpType == '0') {
  //   router.push({ path: val.tips })
  // }
  if(val.path=='/index'){
    // let companyRole = localStorage.getItem('companyRole') //1级菜单标识
    // let tips=companyRole+'-'+state.companyRole
    // router.push({ path: '/index', query: { comRole: tips } })
    router.push({ path: '/index', query: { comRole: state.companyRole } })
  }else{
    router.push({ path: val.path,})
  }
  localStorage.setItem('workbenchPosition', val.companyRole)

}
//
import orderInfo from '@/store/modules/order'
function changeSidbar(tagName) {
  localStorage.setItem('tagName', tagName)
  orderInfo().setTagName(tagName)
  let companyRole = localStorage.getItem('companyRole') || routList.value[0].companyRole
     routList.value.forEach(item => {
        if(item.companyRole==companyRole){
          item.children.forEach(intemInfo=>{
            if(intemInfo.companyRole==tagName){
                  permissionStore.setSidebarRouters(intemInfo.children);
            }
          })
        }
      
    });
  // state.typeList.forEach(item => {
  //       if(item.companyRole==tagName){
  //   permissionStore.setSidebarRouters(item.children);
          
  //         // item.children.forEach(intemInfo=>{
  //         //   if(intemInfo.companyRole==tagName){
  //         //     intemObj.push(intemInfo)
  //         //   }
  //         // })
  //       }
      
  //   })

  // const permissionStore = usePermissionStore()
  // permissionStore.generateRoutesJc(localStorage.getItem('companyRole'), tagName)
}
watch(() => orderInfo().tagName, (val: any) => {
  state.companyRole = val
  // if(val=='carServer'){
  //   state.companyRole=val
  // }
})
//companyRole - 'zx','putBox','cars','sellBox'
function showTages(companyRole = 'zx') {
  let typeList: any = []
  let localTags = []
  routList.value.forEach(item => {
		if(item.companyRole==companyRole){
		  typeList=item.children
		}
	});
  return [...typeList, ...localTags]
}

</script>

<style scoped>
.route_type {
  padding-top: 10px;
  width: 100%;
  text-align: center;
  font-size: 15px;
}

.route_type>span {
  padding: 0 30px 0 30px;
}

.route_type>span:hover {
  color: #2158F3;
  cursor: pointer;
}

.choiced {
  color: #2158F3;
  /* text-decoration: underline */
}
</style>